<template>
  <div class="visual-field">
      <span>{{ value.fieldName }}</span>
      <span>
        <span class="pull-down">
          <img @click="moreShow = !moreShow" src="@/assets/image/main/下拉.png" />

          <ul v-show="moreShow" class="moreBox">
            <li
              v-for="(way, index) in getWayList(typeIndex)"
              :key="index"
              @click="setWay(typeIndex, way.value)"
            >
              <img :class="{ hiden: wayActive != way.value }" src="@/assets/image/main/钩.png" />
              {{ way.label }}
            </li>
          </ul>
        </span>
        <img @click="removeField(type, typeIndex)" src="@/assets/image/main/关闭.png" />
      </span>
    </div>
</template>

<script>
export default {
  props: ["getChartActive", "type", "value", "typeIndex"],
  computed: {
    getWayList() {
      return function (index) {
        let valueSheetName = this.getChartActive.value[0].sheetName;
        let valueFieldName = this.getChartActive.value[index].fieldName;
        let fieldType = this.getFeildType(valueSheetName, valueFieldName);

        return this.checkFieldType(fieldType);
      };
    },
    cahrtActiveWay() {
    
      return this.getChartActive.value[this.typeIndex].wayType
    },
  },
  data() {
    return {
      moreShow: false,
      wayActive: null,
    };
  },
  methods: {
    setWay(index, way) {
      
      this.wayActive = way
      this.moreShow = false
      this.$emit("set-way", index, way);
    },
    setWayType(index, way){
      let data = {
        index,
        way
      }
      this.$store.commit('setWayType', data)
      // console.log(index, value)
    },
    getFeildType(sheetName, fieldName) {
      let loadSheetList = this.$store.state.loadSheet.loadSheetList;
      let types = [];
      let columns = [];
      for (let loadSheet of loadSheetList) {
        if (loadSheet.showName == sheetName) {
          types = loadSheet.types;
          columns = loadSheet.columns;
        }
      }

      for (let i = 0; i < columns.length; i++) {
        if (columns[i] == fieldName) {
          return types[i];
        }
      }

      return null;
    },
    checkFieldType(type) {
      
      if (type == "object" || type == "category") {
        let wayList = [
          {
            label: "计数",
            value: "count",
          },
          {
            label: "计数（非重复）",
            value: "countNR",
          },
        ];
        this.wayActive = !this.wayActive ? "count" : this.wayActive;
        this.wayList = wayList;

        return wayList;
      } else {
        this.wayActive = !this.wayActive ? "sum" : this.wayActive;

        this.wayList = [
          {
            label: "求和",
            value: "sum",
          },
          {
            label: "平均值",
            value: "mean",
          },
          {
            label: "最小值",
            value: "min",
          },
          {
            label: "最大值",
            value: "max",
          },
          {
            label: "计数（非重复）",
            value: "countNR",
          },
          {
            label: "计数",
            value: "count",
          },
          {
            label: "标准方差",
            value: "std",
          },
          {
            label: "方差",
            value: "var",
          },
        ];

        return this.wayList;
      }
    },
    removeField(type, index) {
      this.$emit("remove-field", type, index);
    },
  },
};
</script>

<style scoped>
.hiden {
  visibility: hidden;
}


.pull-down {
  position: relative;
}

.moreBox {
  position: absolute;
  top: 8px;
  left: -100px;

  list-style-type: none;
  padding: 0;
  background-color: white;
  border: 1px solid black;

  color: black;

  width: 150px;

  z-index: 40;
}

.moreBox li {
  padding: 5px;

  text-align: start;
}

.moreBox li:hover {
  background-color: rgb(200, 200, 200);
}

.field-item img {
  width: 20px;
}

.field-item {
  display: flex;
  justify-content: space-between;
  align-items: center;

  color: white;
  background-color: rgb(51, 51, 51);
  padding: 4px;
  border-radius: 4px;
  border:1px solid black;
  margin-bottom: 3px;
}


.field-item span {
  display: flex;
  align-items: center;
}
</style>